import { select } from '@/lib/simple-db';

export default async function SimpleDBTestPage() {
  let users: any[] = [];
  let error: string | null = null;

  try {
    // 查询示例：获取所有用户
    users = await select('SELECT * FROM users LIMIT 10');
  } catch (err) {
    error = err instanceof Error ? err.message : '数据库错误';
  }

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">简易MySQL查询测试</h1>
      
      {error && (
        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
          <strong>错误：</strong> {error}
          <p className="text-sm mt-2">
            请确保：
            <br />1. MySQL正在运行
            <br />2. 已创建 testdb 数据库
            <br />3. 已创建 users 表
            <br />4. 修改 simple-db.ts 中的密码
          </p>
        </div>
      )}

      <div className="bg-gray-100 p-4 rounded mb-4">
        <h3 className="font-semibold mb-2">快速开始：</h3>
        <ol className="list-decimal list-inside space-y-1 text-sm">
          <li>在MySQL中运行：CREATE DATABASE testdb;</li>
          <li>创建表：CREATE TABLE users (id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50), email VARCHAR(100));</li>
          <li>插入数据：INSERT INTO users (name, email) VALUES ('张三', 'zhangsan@test.com');</li>
          <li>修改 src/lib/simple-db.ts 中的密码</li>
        </ol>
      </div>

      <h2 className="text-xl font-semibold mb-2">查询结果：</h2>
      
      {users.length > 0 ? (
        <div className="space-y-2">
          {users.map((user: any) => (
            <div key={user.id} className="border p-3 rounded">
              <p><strong>ID:</strong> {user.id}</p>
              <p><strong>姓名:</strong> {user.name || user.username}</p>
              <p><strong>邮箱:</strong> {user.email}</p>
            </div>
          ))}
        </div>
      ) : (
        <div className="text-gray-500">
          没有找到数据，请检查数据库设置。
        </div>
      )}
    </div>
  );
}